<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      right-text="管理"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="infosimg">
      <span>头像</span>
      <van-uploader v-model="fileList" :max-count="1" />
    </div>
    <div class="infos">
      <span class="infosleft">昵称：</span>
      <input type="text" v-model="data.user.nickName" v-if="isedit" />
      <span class="infosright" v-else>{{data.user.nickName}}</span>
    </div>
    <div class="infos" style="display:flex;  justify-content: start;">
      <span class="infosleft">性别:</span>
      <input type="text" v-model="edsex" v-if="isedit" class="editsex" />
      <div v-else>
        <span class="infosright" v-if="data.user.sex = '0'">男</span>
        <span class="infosright" v-else-if="data.user.sex = '1'">女</span>
        <span class="infosright" v-else>未知</span>
      </div>
    </div>
    <div class="infos">
      <span class="infosleft">手机号:</span>
      <input type="text" v-model="data.user.phonenumber" v-if="isedit" />
      <span class="infosright" v-else>{{data.user.phonenumber}}</span>
    </div>
    <div class="infos">
      <span class="infosleft">账号注册时间:</span>
      <span class="infosright">{{data.user.createTime}}</span>
    </div>
    <div class="infos">
      <span class="infosleft" @click="gopwdamend">修改密码</span>
    </div>
    <div v-if="isedit" class="buttons">
      <van-button plain type="success" @click="edittrue">确定</van-button>
      <van-button plain type="danger" @click="editfalse">取消</van-button>
    </div>
    <div>
      <van-button plain type="primary" class="imgbtn" @click="edit">点击上传图片</van-button>
    </div>
  </div>
</template>

<script setup>
import { flagStore } from "../stores/counter";
import { onMounted, onUnmounted, ref, reactive } from "vue";
import { upload } from "../model/until";
import { detail, amend } from "../model/userModel";
import { useRouter } from "vue-router";
let edsex = ref("男");
let isedit = ref(false);
let flagInfo = flagStore();
let router = useRouter();
let data = reactive({
  user: {}
});
const imgbtn = () => {};
const onClickRight = () => {
  isedit.value = true;
};
const onClickLeft = () => {
  router.push("/userdetail");
};
const edittrue = () => {
  amend(
    {
      nickName: data.user.nickName,
      phonenumber: data.user.phonenumber,
      sex: data.user.sex
    },
    {
      Authorization: window.localStorage.getItem("token")
    }
  ).then(res => {
    // console.log(res);
    isedit.value = false;
  });
  // console.log(data.user.nickName);
  // if (data.user.phonenumber.length == 11) {
  //   console.log(data.user.phonenumber);
  // } else {
  //   alert("电话号码错误");
  // }
  // if (edsex.value == "男" || edsex.value == "女") {
  //   console.log(edsex.value);
  // } else {
  //   console.log("未知");
  // }
};
const editfalse = () => {
  isedit.value = false;
};
const gopwdamend = () => {
  router.push("/amendpwd");
};
const fileList = ref([{ url: "", isImage: true }]);

let edit = () => {
  let formData = new FormData();
  formData.append("file", fileList.value[0].file);

  upload(formData, {
    Authorization: window.localStorage.getItem("token")
  }).then(res => {
    console.log(res);
    console.log(res.data.url);
    fileList.url = res.data.url;
  });
};
onMounted(() => {
  isedit.value = false;
  flagInfo.changeFlag(false);
  detail(
    {},
    {
      Authorization: window.localStorage.getItem("token")
    }
  ).then(res => {
    console.log(res);
    data.user = res.data.user;
  });
});
onUnmounted(() => {
  flagInfo.changeFlag(true);
});
</script>

<style lang="scss">
.infosimg {
  width: 100%;
  height: 90px;
  border-bottom: 1px solid #eee;
  margin-top: 50px;
  padding-left: 20px;
  padding-right: 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  line-height: 90px;
  span {
    font-size: 14px;
  }
}
.infos {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #eee;
  padding-left: 20px;
  padding-right: 70px;
  box-sizing: border-box;
  line-height: 50px;
  .editsex {
    margin-top: 10px;
    margin-left: 20px;
    width: 100px;
    height: 20px;
  }
  input {
    margin-left: 10px;
    width: 100px;
    height: 20px;
  }
  span {
    font-size: 14px;
  }
  .infosleft {
    color: rgba(81, 76, 76, 0.667);
    margin-right: 10px;
  }
  .infosright {
    font-size: 14px;
  }
}
.buttons {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  .van-button {
    height: 37px;
    margin-left: 15px;
    margin-right: 15px;
  }
}
.imgbtn {
  margin-left: 115px;
  margin-top: 20px;
  height: 37px;
}
</style>